let nowClientWidth = document.documentElement.clientWidth;
function nowSize(val, initWidth = 375) {
    return val * (nowClientWidth / initWidth);
}

import echarts from 'echarts';
const barWidth = 6
const tooltipFontSize = nowSize(14)
const symbolSize = 6 // 折线拐点大小
const blueColor = '#6697fd'
const formmatterTitleShodaw = '#000'
const formmatterTitleBorder = blueColor
const barBorderWidth = 1
const barShadowBlur = 10
const symbolSizeArrow = [nowSize(14), nowSize(6)]

const yAxis = {
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
    splitLine: {
        lineStyle: {
            color: '#E5E5E5',
        }
    },
    axisLabel: {
        color: '#999999',
        fontSize: 11
    }
}

const xAxis = {
    type: 'category',
    axisTick: {
        show: false
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: '#E5E5E5',
        }
    },
    axisLabel: {
        color: '#999999',
        fontSize: 11
    }
}

const grid = {
    left: '0%',
    right: '3%',
    bottom: '5%',
    top: '18%',
    containLabel: true
}

/**
 * 
 * @param {object} params
 * @param {string} titleColor - 标题颜色
 * @param {array} units - 单位
 * @param {number} spliceNum - 分割位置（有些tooltip需要展示为横排+竖排样式，spliceNum为params参数切割的位置）
 * @returns {string} 一串html
 */
const formmatterCommon = (params, titleColor, units = [], spliceNum = 0) => {
    let title = `<div style="color:${titleColor};text-align:center;font-size:${nowSize(14)}px;margin-bottom: 5px;">${params[0].name}</div>`
    // 全部竖排
    let paramsHtml = params.map(({ seriesName, value }, index) => `<div style="margin-bottom: 5px;">${seriesName}：<span style="color: #707272;padding-right: 5px;">${value}${units[index]}</span></div>`);
    // 横排+竖排
    if (spliceNum) {
        paramsHtml[0] = `<div style="display: flex;"><div>${paramsHtml[0]}`
        paramsHtml.splice(spliceNum, 0, `</div><div style="margin-left: 5px;">`);
        const lastIndex = paramsHtml.length - 1
        paramsHtml[lastIndex] = `${paramsHtml[lastIndex]}</div></div>`
    }
    paramsHtml = `${paramsHtml.join('')}`
    return `${title}${paramsHtml}`
}

/**
 * tooltip样式
 * @param {string} type - 样式类型（shadow：阴影型，border：边框型）
 * @param {array} units - 单位
 * @param {number} spliceNum - 分割位置
 * @returns 
 */
const tooltipFormatter = (type, units = [], spliceNum) => {
    const formmattertitle = {
        shadow: formmatterTitleShodaw,
        border: formmatterTitleBorder
    }
    const config = {
        shadow: {
            extraCssText: 'box-shadow: 0 0 6px 0 rgba(0,0,0,0.16);'
        },
        border: {
            backgroundColor: 'rgba(255,255,255,0.8)',
            borderColor: 'rgb(214, 226, 253)',
            borderWidth: '1',
            borderRadius: 0,
        }
    }
    const tooltip = {
        formatter: (params) => formmatterCommon(params, formmattertitle[type], units, spliceNum),
        ...config[type]
    }
    return tooltip
}
// line/line渐变
const seriesLine = (obj = {}) => {
    const { lineType = 'normal', color, endColor = '#fff', data, name = '',
        yAxisIndex = 0, smooth = false, showSymbol = true, symbolSize = 5, itemStyle = {} } = obj
    // 公共样式
    const publicStyle = {
        type: 'line',
        name,
        smooth,
        symbol: 'circle',
        symbolSize,
        data,
        yAxisIndex,
        sampling: 'average',
        showSymbol,
        itemStyle: {
            color,
            ...itemStyle
        },
        lineStyle: {
            width: 1
        }
    }
    // 渐变
    const areaStyle = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color
        }, {
            offset: 0.9,
            color: endColor
        }])
    }
    // 线性渐变
    lineType === 'gradualChange' && (publicStyle.areaStyle = areaStyle)

    return publicStyle
}

// bar/bar渐变/bar-shodaw/bar-border
const seriesBar = (obj = {}) => {
    const { barType = 'normal', color, borderColor, endColor, data,
        name, yAxisIndex = 0, barBorderRadius = 10, itemStyle = {} } = obj
    const borderStyle = {
        color,
        borderColor,
        borderWidth: barBorderWidth,
    }
    const config = {
        normal: { color }, // 常规bar
        gradualChange: { // 渐变bar
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color // 0% 处的颜色
                }, {
                    offset: 1, color: endColor // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            barBorderRadius,
            // 新增

        },
        barShodaw: { // 阴影bar
            ...borderStyle,
            shadowColor: borderColor,
            shadowBlur: barShadowBlur
        },
        radiuBorder: { // 圆角边框
            ...borderStyle,
            barBorderRadius,
        }
    }
    const publicStyle = {
        type: 'bar',
        name,
        barWidth,
        data,
        yAxisIndex,
        itemStyle: { ...config[barType], ...itemStyle }
    }

    return publicStyle
}


export {
    yAxis,
    xAxis,
    barWidth,
    grid,
    nowSize,
    seriesLine,
    seriesBar,
    tooltipFontSize,
    tooltipFormatter,
    symbolSize,
    symbolSizeArrow,
}